<template>
  <div class="body">
    <div class="form">
      <div
        style="max-width:480px"
      >
      <el-col :span="8" :offset="8">
        <header>校园生活</header>
      </el-col>
      <el-tabs stretch>
        <!-- <el-tab-pane label="用户名密码登录" name="0">
          <el-form
            :model="loginForm"
          >
            <el-form-item
              prop="username"
              :rules="[
                {
                  required: 'true',
                  message: '用户名不能为空',
                  trigger: 'blur'
                }
              ]"
            >
              <el-col :span="16" :offset="4">
                <el-input size="large" type="text" v-model="loginForm.username" placeholder="请输入用户名">
                  <template #prefix>
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-yonghu"></use>
                    </svg>
                  </template>
                </el-input>
              </el-col>
            </el-form-item>
            <el-form-item
              prop="username"
              :rules="[
                {
                  required: 'true',
                  message: '密码不能为空',
                  trigger: 'blur'
                }
              ]"
            >
              <el-col :span="16" :offset="4">
                <el-input size="large" show-password type="password" v-model="loginForm.password" placeholder="请输入密码">
                  <template #prefix>
                    <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-mima"></use>
                    </svg>
                  </template>
                </el-input>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="16" :offset="4">
                <el-button color="orange" type="warning" size="large" class="button" @click="login" >登录</el-button>
              </el-col>
            </el-form-item>
          </el-form>
        </el-tab-pane> -->

        <el-tab-pane label="邮箱登录" name="0">
          <el-form
            :model="emailForm"
          >
            <el-form-item 
              prop="mailbox"
              :rules="[
                {
                  required: true,
                  message: '请输入邮箱地址',
                  trigger: 'blur'
                },
                {
                  type: 'email',
                  message: '请输入正确的邮箱地址',
                  trigger: ['blur','change'],
                  
                }
              ]"
            >
              <el-col :span="16" :offset="4">
                <el-input  v-model="emailForm.mailbox" size="large" type="text"  placeholder="请输入邮箱"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item
              prop="captcha"
              :rules="[
                {
                  required: 'true',
                  message: '验证码不能为空',
                  trigger: 'blur'
                }
              ]"
            >
              <el-col :span="16" :offset="4">
                <el-input v-model="emailForm.captcha" size="large" type="text"  placeholder="请输入验证码">
                  <template #append>
                    <el-button :disabled="ifEmail" @click="post_captcha">{{ifEmail ? `${time}s后重新获取` : '获取验证码'}}</el-button>
                  </template>
                </el-input>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="16" :offset="4">
                <el-button color="orange" size="large" type="warning" class="button"  @click="login">登录</el-button>
              </el-col>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      
        
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus';
import store from '@/store';
import {emailLogin,getUserInfo,sendEmailCode} from '@/api/user'
    //接收密码登录表单
    let loginForm = reactive({
      username:"",
      password:""
    })

    //创建路由对象
    let router = useRouter();

 

    //邮箱登录接收
    let emailForm = reactive({
      mailbox: '',
      captcha: '',
      
    });
    let pattern = /^([0-9a-zA-Z_\.\-\])+\@([0-9a-zA-Z_\.\-\])+\.([a-zA-Z]+)$/;

    //验证码控制阀
    let ifEmail = ref(false);
    let time = ref(60);

    //倒计时
    function time_down() {
      let startTime = localStorage.getItem('startTimeLogin');
      let nowTime = new Date().getTime();
      if(startTime) {
        let surplus = 60 - parseInt((nowTime - startTime)/1000,10);
        time.value = surplus <= 0 ? 0 : surplus;
      }else {
        time.value = 60;
        localStorage.setItem('startTimeLogin',nowTime);
      }
      
      let timer = setInterval(() => {
        time.value--;
        ifEmail.value = true;
        if(time.value <= 0) {
          localStorage.removeItem('startTimeLogin');
          clearInterval(timer);
          time.value = 60;
          ifEmail.value = false;
        }
      },1000)
      
    }
    onMounted(() => {
      if(localStorage.getItem('startTimeLogin')){
        time_down();
      }
    });
    
       //登录处理函数
    async function login(){
        let {token,tokenHead} = await emailLogin(emailForm.mailbox,emailForm.captcha);
        store.dispatch('setToken',tokenHead+token+'');
        let userInfo = await getUserInfo();
        store.dispatch('setUserInfo',userInfo);
        router.replace({
          path:"/home"
        })
    };
    // 发送验证码
   async function post_captcha() {
    if(!pattern.test(emailForm.mailbox)){
        ElMessage({
          type: 'error',
          message: '邮箱格式错误'
        })
      }else{
        await sendEmailCode(emailForm.mailbox);
        ElMessage({
        message: '验证码已发送,5分钟内有效',
        type: 'success'
        })
        ifEmail.value = true;
        time_down();
      }
    
    
   }

</script>

<style scoped>

.body {
  height: 100%;
  width: 100%;
  background-image: url(../assets/image/login.png);
  background-size: cover;
  position: absolute;
}
  
  .form {
    height: 300px;
    width: 450px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -225px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* background-color: rgb(192, 61, 61); */
    background-color: whitesmoke;
    box-shadow: var(--el-box-shadow-light);
    opacity: 75%;
  }

  /* 登录按钮 */
  .button {
    width: 300px;
  }

  /* svg图标 */
  svg {
    font-size: 24px;
  }

  /* 登录表头 */
  header {
    font-size: 36px;
  }

  /* 标签页 */
  /* ::v-deep el-tabs__nav-scroll {
    width: 50%;
    margin: 0 auto;
  } */
</style>